<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售流通</title>
    <link rel="stylesheet" href="../css/zx_xiaoshou.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <!-- <link rel="stylesheet" href="../css/plant.css"> -->
    <link rel="stylesheet" href="../font/font.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div id="add_btn" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h5> <span class="iconfont icon-gaojingshixin"></span>确认删除吗</h5>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" id="zx_del">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <!-- 这是侧边栏 -->
            <div id="kong" class="col-md-2"></div>
            <div id="main_menu" class="col-md-2">
                <ul id="myul">
                    <li id="logoli">
                        <div><span class="iconfont icon-shouyefill"></span><a href="../index.html">首页</a>
                        </div>
                    </li>
                    <li id="have">
                        <div><span class="iconfont icon-tongji"></span>统计</div>
                        <ul>
                            <li><a href="../pages/zx_tongji.html">种植收购统计</a></li>
                            <li><a href="../pages/saleStatistical.html">销售统计</a> </li>
                            <li><a href="../pages/dj03.html">人员统计</a> </li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-zhongzhiguanli"></span>种植养殖</div>
                        <ul>
                            <li><a href="../pages/plant.html">蔬果</a></li>
                            <li><a href="../pages/farming.html">肉类</a></li>
                        </ul>
                    </li>
                    <li>
                        <div><span class="iconfont icon-caigou"></span>采购收购</div>
                        <ul>
                            <li><a href="../pages/Supplier_management.html">供应商管理</a> </li>
                            <li><a href="../pages/pick_fruit.html">蔬果</a></li>
                            <li><a href="../pages/pick_meat.html">肉类</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-yunshuzhongwuliu-xianxing"></span>运输 </div>
                        <ul>
                            <li><a href="../pages/tran_meat.html">肉类运输</a> </li>
                            <li><a href="../pages/tran_ve.html">蔬菜运输</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-xinruku"></span>仓库 </div>
                        <ul>
                            <li><a href="../pages/stockIn.html">入库</a></li>
                            <li><a href="../pages/stockOut.html">出库</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-shejishengchan"></span><a href="../pages/production.html">生产</a>
                        </div>
                    </li>
                    <li>
                        <div id="logo"><span class="iconfont icon-xiaoshou"></span>销售 </div>
                        <ul>
                            <li><a href="../pages/zx_xiaoshou.html">销售流通</a></li>
                            <li><a href="../pages/online_sho_by.html">网购</a></li>
                            <li><a href="../pages/online_retreate.html">网购-退换记录</a></li>
                            <li><a href="../pages/zx_pima.html">批码管理</a></li>
                        </ul>

                    </li>
                    <li>
                        <div><span class="iconfont icon-lajitong"></span><a
                                href="../pages/waste_management.html">废料去向</a></div>
                    </li>
                    <li>
                        <div><span class="iconfont icon-guanliyuan"></span>管理</div>
                        <ul id="secondary">
                            <li><a href="../pages/dj01.html">人员管理</a> </li>
                            <li><a href="../pages/dj02.html">操作日志</a> </li>
                            <li><a href="../pages/board.html">留言板</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="left_content" class="col-md-10">
                <div id="left_huisebj"></div>
                <!-- 这是头 -->
                <nav id="main_headnav">
                    <div class="clear">
                        <div class="navlefspan">
                            <span class="iconfont icon-caidan" id="hidenmenu"></span>
                            <span class="mytitle">食品流通安全管理系统</span>
                        </div>
                        <div class="navrigspan">
                            <span class="iconfont icon-tixing" id="tx"></span>
                            <!-- 头像 -->
                            <img src="../images/shouye/tx.jpg" alt="">
                            <!-- 姓名 -->
                            <span id="tc">退出</span>
                        </div>
                    </div>
                    <div>
                        <!-- 这里写小的头 -->
                    </div>
                </nav>
                <div id="main_content">
                    <div id="mycentent">
                        <!-- 这是内容 -->
                        <div id="box">
                            <div id="main">
                                <!-- 详情页 -->
                                <div id="z_details">
                                    <!-- <h4>销售订单详情</h4>
                                    <div id="z_xinxi">
                                        <p class="z_details_p">用户信息</p>
                                        <div id="z_xinxi_d1">
                                            <span>用户名称：<i></i></span> <span>用户手机：<i></i></span>
                                            <span>发货地址：<i></i></span>
                                            <span>状态：<i></i></span>
                                        </div>
                                    </div>
                                    <div id="z_xinxi">
                                        <p class="z_details_p">商品信息</p>
                                        <div id="z_xinxi_d2">
                                            <span>销售地点：<i></i></span> <span>销售方式：<i></i></span>
                                            <span>销售单号：<i></i></span> <span>商品种类：<i></i></span>
                                            <span>商品名称：<i></i></span> <span>商品数量：<i></i></span>
                                            <span>商品价格：<i></i></span> <span>商品包装：<i></i></span>
                                            <span>保质期：<i></i></span>
                                        </div>
                                    </div>
                                    <div class="clear">
                                        <span class="z_details_qr">确认</span>
                                        <span class="z_details_qx">取消</span>
                                    </div> -->
                                </div>
                                <p id="mynav">
                                    <span>销售</span><span>></span><span class="mycolor2">销售流通</span>

                                </p>
                                <div id="add">
                                    <span>销售信息</span>
                                </div>
                                <div id="search" class="row ">
                                    <div>
                                        <span id="search_h4">筛选查询:</span>
                                        <span id="abb">
                                            <span class="abb_s1">商品名</span><input type="text" id="abb_in1">
                                            <span class="abb_s2">
                                                销售点 </span>
                                            <select name="" id="abb_s1">
                                                <option value="全部">全部</option>
                                                <option value="四川">四川</option>
                                                <option value="北京">北京</option>
                                            </select>

                                            <span class="abb_s3">
                                                销售方式</span>
                                            <select name="" id="abb_s2">
                                                <option value="全部">全部</option>
                                                <option value="网购">网购</option>
                                                <option value="线下">线下</option>
                                            </select>

                                            <button id="z_chaxun">查询</button>
                                            <button id="z_chongzhi">重置</button>
                                    </div>
                                </div>
                                <table class="table table-bordered" id="mytable">
                                    <thead>
                                        <tr>
                                            <th>商品编号</th>
                                            <th>商品名</th>
                                            <th>销售点</th>
                                            <th>销售方式</th>
                                            <th>数量单位</th>
                                            <th>商品价格</th>
                                            <th>保质期</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="mytbody">

                                    </tbody>
                                </table>
                            </div>
                            <div id="paging" class="clear">
                                <div>
                                    跳至
                                    <input type="text" id="z_opag_inp" placeholder="">
                                    页
                                </div>
                                <div>
                                    <select name="" id="z_oSelect">
                                        <option value="10">10条/页</option>
                                        <option value="20">20条/页</option>
                                        <option value="30">30条/页</option>
                                    </select>
                                </div>
                                <ul id="zMyUl" class="clear">

                                </ul>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>


</body>
<script src="../js/index.js"></script>
<script>
    $('#add button').click(() => {
        window.location = './plant-add.html'
    })
    window.onload = function () {
        let x = $("#box").width()
        $('#box').width(x)
    }

    let [page, current] = [1, 10]
    let dangqianye
    let mohu = document.getElementById('abb_in1')
    let z_chaxun = document.getElementById('z_chaxun')
    let z_chongzhi = document.getElementById('z_chongzhi')
    let abb_s1 = document.getElementById('abb_s1')
    let abb_s2 = document.getElementById('abb_s2')
    let z_details = document.getElementById('z_details')



    showBody()
    // function showBody() {
    //     $.ajax({
    //         url: '/zx_query',
    //         data: {
    //             page: page,
    //             current: current,
    //             mohu: mohu.value
    //         },
    //         success: function (res) {
    //             if (res.error) {
    //                 console.log(res.data);
    //             } else {
    //                 $('#mytbody').html('')
    //                 $(res.data).each((i, v) => {
    //                     $('#mytbody').append(`     
    //                     <tr  data-id=${v.z_id}>
    //                         <td>${v.保质期}</td>
    //                         <td>${v.销售点}</td>
    //                         <td>${v.销售方式}</td>
    //                         <td>${v.商品名}</td>
    //                         <td>${v.商品编号}</td>
    //                         <td>${v.商品价格}</td>
    //                         <td>${v.数量单位}</td>
    //                         <td>
    //                             <span class='mytable_xiangqing'>详情</span>
    //                             <span class="mytable_details_del">删除</span>
    //                         </td>             
    //                     </tr>
    //                     `)
    //                 }),
    //                     $('#zMyUl').html('')
    //                 let shang = `<li class='z_shangyiye' ><</li>`
    //                 let xia = `<li class='z_xiayiye'>></li>`
    //                 $('#zMyUl').append(shang)
    //                 for (let i = 1; i <= Math.ceil((res.total / current)); i++) {
    //                     if (page == i) {
    //                         $('#zMyUl').append(`<li class="zMylid zMyli">${i}</li>`)
    //                     } else {
    //                         $('#zMyUl').append(`<li class='zMylid'>${i}</li>`)
    //                     }
    //                     dangqianye = i
    //                 }
    //                 $('#zMyUl').append(xia)
    //             }
    //         }
    //     })
    // }


    function showBody() {
        $.ajax({
            url: '/zx_query',
            data: {
                page: page,
                current: current,
                mohu: mohu.value,
                abb_s1: abb_s1.value,
                abb_s2: abb_s2.value
            },
            success: function (res) {
                if (res.error) {
                    console.log(res.data);
                } else {
                    $('#mytbody').html('')
                    $(res.data).each((i, v) => {
                        $('#mytbody').append(`     
                        <tr  data-id=${v.z_id}>
                            <td>${v.销售单号}</td>
                            <td>${v.c2_name}</td>
                            <td>${v.销售地点}</td>
                            <td>${v.销售方式}</td>
                            <td>${v.数量}</td>
                            <td>${v.销售价}</td>
                            <td>${v.保质期}</td>
                            <td>
                                <span class='mytable_xiangqing'>详情</span>
                                <span class="mytable_details_del" data-toggle='modal' data-target="#add_btn ">删除</span>
                            </td>             
                        </tr>
                        `)
                    }),
                        $('#zMyUl').html('')
                    let shang = `<li class='z_shangyiye' ><</li>`
                    let xia = `<li class='z_xiayiye'>></li>`
                    $('#zMyUl').append(shang)
                    for (let i = 1; i <= Math.ceil((res.total / current)); i++) {
                        if (page == i) {
                            $('#zMyUl').append(`<li class="zMylid zMyli">${i}</li>`)
                        } else {
                            $('#zMyUl').append(`<li class='zMylid'>${i}</li>`)
                        }
                        dangqianye = i
                    }
                    $('#zMyUl').append(xia)
                }
            }
        })
    }
    // 模糊查询
    z_chaxun.addEventListener('click', function () {
        console.log(abb_s1.value);
        page = 1
        showBody()
    })

    // 重置
    z_chongzhi.addEventListener('click', function () {
        location.reload()
    })




    // li翻页
    $('#zMyUl').on('click', '.zMylid', function () {
        page = $(this).text()
        showBody()
    })


    // 上一页
    $('#zMyUl').on('click', '.z_shangyiye', function () {
        if (page != 1) {
            page--
            showBody()
        }
    })

    // 下一页
    $('#zMyUl').on('click', '.z_xiayiye', function () {
        if (page < dangqianye) {
            page++
            showBody()
        }
    })

    // 数据数量
    $('#z_oSelect').change(function () {
        current = $(this).val()
        showBody()
    })

    // 回车跳转页面
    $('#z_opag_inp').focus(function () {
        window.onkeydown = function (e) {
            if (e.keyCode == 13) {
                console.log($('#z_opag_inp').val());
                page = $('#z_opag_inp').val()
                $('#z_opag_inp').val("")
                showBody()
            }
        }
    })

    $('#z_opag_inp').blur(function () {
        window.onkeydown = null
    })

    let indexs
    // 删除
    $('#mytbody').on('click', '.mytable_details_del', function () {
        indexs = $(this).parents('tr').attr('data-id')
    })
    // 删除确认
    let zx_del = document.getElementById('zx_del')
    zx_del.addEventListener('click', function () {
        $.ajax({
            url: '/z_del',
            method: 'post',
            data: {
                id: indexs
            },
            success: (res) => {
                console.log(res);
                if (res.error) {
                    console.log(res.msg)
                } else {
                    showBody();
                    alert('删除成功')
                }
            }
        })
    })

    let zx_detailsId
    // 详情
    $('#mytbody').on('click', '.mytable_xiangqing', function () {
        z_details.style.display = 'block'
        z_details.style.zIndex = '+10'

        zx_detailsId = $(this).parents('tr').attr('data-id')
        $('#left_huisebj').css({
            display: 'block',
            zIndex: '+9'
        })


        showDetails()
        function showDetails() {
            $.ajax({
                url: '/zx_details',
                data: {
                    zx_detailsId: zx_detailsId
                },
                success: function (res) {
                    console.log(res);
                    if (res.error) {
                        console.log(res.error);
                    } else {
                        console.log(res.data);
                        $('#z_details').html('')
                        $(res.data).each((i, v) => {
                            $('#z_details').append(` 
                            <h4>销售订单详情</h4>
                                    <div id="z_xinxi">
                                        <p class="z_details_p">用户信息</p>
                                        <div id="z_xinxi_d1">
                                            <span>用户名称：<i>${v.用户名称}</i></span> <span  class="z_xinxi_24">用户手机：<i>${v.用户手机号}</i></span>
                                            <span class="z_xinxi_30">发货地址：<i>${v.发货地址}</i></span>
                                            <span>状态：<i>${v.状态}</i></span>
                                        </div>
                                    </div>
                                    <div id="z_xinxi">
                                        <p class="z_details_p">商品信息</p>
                                        <div id="z_xinxi_d2">
                                            <span>销售地点：<i>${v.销售地点}</i></span> <span class="z_xinxi_24">销售方式：<i>${v.销售方式}</i></span>
                                            <span class="z_xinxi_30">销售单号：<i>${v.销售单号}</i></span> <span>商品种类：<i>${v.c1_name}</i></span>
                                            <span>商品名称：<i>${v.c2_name}</i></span> <span class="z_xinxi_24">商品数量：<i>${v.数量}</i></span>
                                            <span>商品价格：<i>${v.销售价}</i></span><br> <span>商品包装：<i>${v.p_package}</i></span>
                                            <span>保质期：<i>${v.保质期}</i></span>
                                        </div>
                                    </div>
                                    <div class="clear">
                                        <span class="z_details_qr">确认</span>
                                        <span class="z_details_qx">取消</span>
                                    </div>    
                       
                        `)
                        })
                    }

                }
            })
        }

    })

    // 详情取消
    $('#z_details').on('click', '.z_details_qx', function () {
        z_details.style.display = 'none'
        z_details.style.zIndex = '0'

        $('#left_huisebj').css({
            display: 'none',
            zIndex: '0'
        })

    })

    // 详情确定
    $('#z_details').on('click', '.z_details_qr', function () {
        z_details.style.display = 'none'
        z_details.style.zIndex = '0'

        $('#left_huisebj').css({
            display: 'none',
            zIndex: '0'
        })
    })
</script>

</html>